<header class="page-header clearfix">
    <h4><a ng-href="#/k8s"><i class="fa fa-arrow-left"></i></a>宿主机</h4>
    <ol class="breadcrumb">
        <li><a ng-href="#/k8s">容器集群</a></li>
        <li class="active">宿主机</li>
    </ol>
</header>
<section>
    <ui-panel class="panel-list node-panel">
        <div class="row" ng-class="{'group-list-disable': list.btn_group_list}">
            <div class="node-group col-md-3" ui-view></div>
            <div class="node-list col-md-9">
                <form class="form-inline form-search" ng-submit="list.search()">
                    <button class="btn btn-default btn_group_list margin-right-10"
                            ng-class="{'active':!list.btn_group_list}" ng-click="list.groupActive()" type="button">
                        <i class="fa fa-list-ul margin-right-5"></i>{{list.filter.groupCode || '全部'}}
                    </button>
                    <div class="form-group">
                        <input type="text" maxlength="50" ng-model="list.filter.name" class="form-control"
                               placeholder="请输入IP地址查询"/>
                    </div>
                    <button class="btn btn-default" type="submit">查询</button>
                </form>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th width="16%">IP地址</th>
                        <th width="10%">状态</th>
                        <th width="10%">启/停</th>
                        <th width="27%">CPU</th>
                        <th width="27%">内存</th>
                        <th width="10%">容器数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="elem in list.table">
                        <td class="row-head">
                            <a ui-sref="k8s-node-detail.pod({ip: elem.nodeIp, kDbCode: list.dbCode})"
                               title="{{::elem.nodeIp}}">{{::elem.nodeIp}}</a>
                            <div ng-if="elem.nodeStatus" ng-switch="elem.unschedulable" class="toolbox">
                                <a ng-click="list.startNode(elem)" ng-switch-when="true" title="启用"><i
                                        class="fa fa-play"></i></a>
                                <a ng-click="list.stopNode(elem)" ng-switch-when="false" title="停用"><i
                                        class="fa fa-pause"></i></a>
                            </div>
                        </td>
                        <td ng-switch="elem.nodeStatus">
                            <span ng-switch-when="true" class="text-success">正常</span>
                            <span ng-switch-when="false" class="text-danger">异常</span>
                        </td>
                        <td ng-switch="elem.nodeStatus">
                            <div ng-switch-when="true" ng-switch="elem.unschedulable">
                                <span class="text-success" ng-switch-when="false">启用</span>
                                <span class="text-warning" ng-switch-when="true">停用</span>
                                <span ng-switch-when="loading"><div class="loading-sm"></div></span>
                            </div>
                            <div ng-switch-when="false" class="text-danger">N/A</div>
                        </td>
                        <td ng-switch="elem.nodeStatus">
                            <div ng-switch-when="true">
                                <ui-progressbar max="100" value="list.resData[$index].cpu" type="success"><span
                                        class="progress-label-center">{{list.resData[$index].cpu}}%</span>
                                    <span class="progress-label-right">{{::elem.staticStatus.cpu}}核</span></ui-progressbar>
                            </div>
                            <div ng-switch-when="false" class="text-danger text-center">N/A</div>
                        </td>
                        <td ng-switch="elem.nodeStatus">
                            <div ng-switch-when="true">
                                <ui-progressbar max="list.resData[$index].totalMem" value="list.resData[$index].usedMem"
                                                type="info">
                                    <span class="progress-label-center">{{list.resData[$index].usedMem}}/{{list.resData[$index].totalMem}} MB</span>
                                </ui-progressbar>
                            </div>
                            <div ng-switch-when="false" class="text-danger text-center">N/A</div>
                        </td>
                        <td>{{::elem.currentPodNum}}</td>
                    </tr>
                    </tbody>
                </table>
                <!--Loading-->
                <div class="loading" ng-show="!list.table"></div>
                <!--分页-->
                <div ng-show="list.table" class="pagination-group">
                    <ui-pagination-info items-per-page="10" items-per-page-select="false"
                                        total-items="list.page.totalItems"
                                        current-page="list.page.currentPage"></ui-pagination-info>
                    <button type="button" ng-click="list.getList()" class="btn btn-default btn-refresh"><i
                            class="fa fa-refresh"></i></button>
                    <ui-pagination items-per-page="10" total-items="list.page.totalItems"
                                   ng-model="list.page.currentPage" ng-change="list.getList()"></ui-pagination>
                </div>
            </div>
        </div>
    </ui-panel>
</section>